<template>
  <div>
    <!-- <TreeList
        :data="data"
        :selectModel="true"
        @change="nodeClick"
        @click="nodeClick"
        @dblclick="nodeDblClick"
        @contextmenu="nodeContextMenu"
    /> -->
    <!-- <TreeList
        :data="data"
        :tableModel="true"
        @click="nodeClick"
        @dblclick="nodeDblClick"
        @contextmenu="nodeContextMenu"
    /> -->
    <!-- <TreeSelect
        :data="data"
        :selectModel="true"
        @change="nodeClick"
        @dblclick="nodeDblClick"
        @contextmenu="nodeContextMenu"
    /> -->
    <!-- <TreeTableTemplate
        :data="data"
        :node="data ? data[0] : null"
        @click="nodeClick"
        @dblclick="nodeDblClick"
        @contextmenu="nodeContextMenu"
    /> -->
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'FlowManagement',
  components: {
    // TreeList: () => import('@components/TreeList.vue')
    // TableTree: () => import('@components/TreeTable.vue')
    // TreeSelect: () => import('@components/TreeSelect.vue')
    // TreeTableTemplate: () => import('@components/TreeTableTemplate.vue')
  },
  data() {
    return {
      data: [],
      filter: null,
      tableTag: {
        id: 'ID',
        name: '名称'
      }
    }
  },
  computed: {
    ...mapState({
      service: state => state.service
    })
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      const result = await this.service.getCi({ category_id: 'menu' })
      if (result.flag) {
        this.data = result.data
      }
    },
    nodeClick(data) {
      console.log('nodeClick', data)
    },
    nodeDblClick(data) {
      console.log('nodeDblClick', data)
    },
    nodeContextMenu(data) {
      console.log('nodeContextMenu', data)
    }
  }
}
</script>
